<template>
    <div>
        <div>
            <!-- 搜索框，输入时自动搜索 -->
            搜索用户：<el-input class="searchInp" v-model="searchStr" placeholder="搜索用户" clearable
                @input="searchUser"></el-input>
        </div>
        <!-- 图表容器 -->
        <el-row>
            <el-col :span="24">
                <div id="userChart" class="chart"></div>
            </el-col>
        </el-row>
        <!-- :data 要显示的数据，showList 是计算属性，后面要分页，计算属性方便 -->
        <el-table :data="showList" border style="width: 100%">
            <!-- label 表格列头名，prop 每个元素对应的字段 -->
            <el-table-column label="用户名" prop="username" align="center">
            </el-table-column>
            <el-table-column label="年龄" prop="age" align="center">
            </el-table-column>
            <el-table-column label="性别" prop="gender" align="center">
            </el-table-column>
            <el-table-column label="昵称" prop="nickname" align="center">
            </el-table-column>
            <el-table-column label="角色" prop="role" align="center">
            </el-table-column>
            <el-table-column label="账号状态" align="center" prop="flag">
                <template slot-scope="scope">
                    <!-- 使用 el-switch 组件 -->
                    <div class="switch-container">
                        <span class="status-text">锁定</span>
                        <el-switch
                            :value="scope.row.tempFlag"
                            active-color="#13ce66"
                            inactive-color="#ff4949"
                            @change="openConfirmDialog(scope.row)">
                        </el-switch>
                        <span class="status-text">正常</span>
                    </div>
                </template>
            </el-table-column>
            <el-table-column align="center" width="200px">
                <template slot="header">
                    操作
                </template>
                <template slot-scope="scope">
                    <!-- 重置密码 和 删除 按钮 -->
                    <el-button size="mini" type="primary" @click="resetPassword(scope.row.id)">重置密码</el-button>
                    <el-button size="mini" type="danger" @click="deleteUser(scope.row.id)">删除</el-button>
                </template>
            </el-table-column>
        </el-table>
        <!-- 分页 -->
        <el-pagination :page-size="5" :current-page="curPage" @current-change="curPageChange"
            layout="total, prev, pager, next, jumper" :total="list.length">
        </el-pagination>
        <!-- 确认冻结/解冻对话框 -->
        <el-dialog
            title="确认操作"
            :visible.sync="dialogVisible"
            width="30%">
            <span>确定要{{ currentUser && !currentUser.tempFlag ? '解冻' : '冻结' }}用户{{ currentUser && currentUser.nickname }}吗？</span>
            <span slot="footer" class="dialog-footer">
                <el-button @click="cancelFreeze">取消</el-button>
                <el-button type="primary" @click="confirmFreeze">确认</el-button>
            </span>
        </el-dialog>
    </div>
</template>

<script>
import * as echarts from 'echarts';
export default {
    data() {
        return {
            // 所有用户的列表 与 搜索字符串
            list: [],
            searchStr: '',
            // 当前页
            curPage: 1,
            // 定时器id
            searchFlag: false,
            // 对话框相关数据
            dialogVisible: false,
            //当前初始化为null
            currentUser: null,
        }
    },
    methods: {
        // 改变当前页
        curPageChange(newVal) {
            this.curPage = newVal;
        },
        // 重置密码
        resetPassword(uid) {
            // 获取用户
            let user = this.list.find(e => e.id == uid);
            // 弹窗确认
            if (!confirm('确定要重置用户' + user.nickname + '的密码吗？')) return;
            // 发送请求给服务器，并且带上uid
            this.$http.post('/users/backend/reset', { uid })
                .then(({ data: { code } }) => {
                    // 成功
                    if (code == 1) alert('重置密码成功！');
                    //失败
                    else alert('重置密码失败');
                })
        },
        // 删除用户
        deleteUser(uid) {
            // 获取用户
            let user = this.list.find(e => e.id == uid);
            // 弹窗确认
            if (!confirm('确定要删除用户' + user.nickname + '吗？')) return;
            // 发送请求给服务器，带上uid
            this.$http.post('/users/backend/del', { uid })
                .then(({ data: { code } }) => {
                    if (code != 1) return alert('删除失败！');
                    // 在 list 里面删除
                    this.list = this.list.filter(e => e.id != uid);
                    // 更新图表
                    this.updateChart();
                })
        },
        // 打开确认对话框
        openConfirmDialog(user) {
            this.currentUser = { ...user };
            this.dialogVisible = true;
        },
        // 取消冻结/解冻操作
        cancelFreeze() {
            this.dialogVisible = false;
        },
        // 确认冻结/解冻操作
        confirmFreeze() {
            //获取当前用户
            let user = this.currentUser;
            //获取用户确认与否
            //用户点了true ！就是false
            let flag = !user.flag;
            //发送请求
            this.$http.post('/users/backend/flag', { uid: user.id, flag })
                .then(({ data: { code } }) => {
                    if (code == 1) {
                        //找到用户的id
                        let originalUser = this.list.find(e => e.id == user.id);
                        //通过下面的flag和tempflag来判断弹框的语句显示，和上面的三目运算符配合使用
                        originalUser.flag = flag;
                        //刷新这个用户再次出现弹窗的文字
                        originalUser.tempFlag = flag;
                        // 更新图表
                        this.updateChart();
                    } else {
                        //冻结失败
                        alert((flag ? '解冻' : '冻结') + '失败！');
                    }
                })
                //重新设置为false
            this.dialogVisible = false;
        },
        // 搜索用户
        searchUser() {
            if (this.searchFlag) return;
            this.searchFlag = true;
            // 添加定时器，防止出现空白
            setTimeout(() => {
                // 发送请求搜索
                this.$http.get('/users/backend/search', { params: { searchStr: this.searchStr.trim() }})
                    .then(({ data: { code, list } }) => {
                        // 搜索失败提示
                        if (code != 1) return alert('搜索失败');
                        // 返回的用户列表
                        this.list = list.map(user => ({
                            ...user,
                            tempFlag: user.flag,
                        }));
                        // 更新图表
                        this.updateChart();
                    })
                // 标记 cd 好了
                this.searchFlag = false;
            }, 500)
        },
        // 初始化图表
        initChart() {
            this.chart = echarts.init(document.getElementById('userChart'));
            this.updateChart();
        },
        // 更新图表数据
        updateChart() {
            //总人数
            const totalUsers = this.list.length;
            //冻结人数通过filter过滤
            const frozenUsers = this.list.filter(user => user.flag === false).length;
            //正常用户相减
            const normalUsers = totalUsers - frozenUsers;
            const option = {
                title: {
                    // 纵坐标
                    text: '用户统计'
                },
                tooltip: {},
                xAxis: {
                    type: 'category',
                    data: ['冻结用户', '正常用户', '总用户']
                },
                yAxis: {
                    type: 'value'
                },
                series: [
                    {
                        name: '数量',
                        type: 'bar',
                        data: [frozenUsers, normalUsers, totalUsers]
                    }
                ]
            };
            this.chart.setOption(option);
        }
    },
    computed: {
        // 当前显示的用户列表，每五个现在在同一页
        showList() {
            // 获取 [l, r) 内的元素，左闭右开
            let l = (this.curPage - 1) * 5;
            let r = l + 5 > this.list.length ? this.list.length : l + 5;
            return this.list.slice(l, r);
        }
    },
    created() {
        //这样才有用户信息
        // 请求接口获取用户信息
        this.$http.get('/users/backend/list')
            .then(({ data: { code, list } }) => {
                // 获取失败
                if (code != 1) return alert('获取用户信息失败');
                // 获取成功
                this.list = list.map(user => ({
                    ...user,
                    tempFlag: user.flag // 增加 tempFlag 用于控制开关状态
                }));
                // 初始化图表
                this.initChart();
            })
    }
}
</script>

<style scoped>
.searchInp {
    width: 200px;
    margin-bottom: 20px;
}

span {
    margin-left: 10px;
}

.switch-container {
    display: flex;
    align-items: center;
}

.status-text {
    margin: 0 5px;
}

.chart {
    width: 100%;
    height: 400px;
    margin-top: 20px;
}
</style>
